<template>
  <view class="reader">
    <view class="reader-container">
      <view
        class="reader-content"
        v-for="(item, index) in newsData"
        :key="index"
      >
        <view class="reader-header">{{ item.title }}</view>
        <view v-if="item.img == '无'">
          <view></view>
        </view>
        <view
          class="reader-img"
          v-for="(img, index2) in item.img"
          :key="index2"
          v-else
        >
          <image :src="img" mode="widthFix" />
        </view>
        <view class="reader-text" v-html="item.text"> </view>
        <!-- <rich-text :nodes="nodes"></rich-text> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      newsData: [],
      newId: 0,
      title: "一亿人的脱贫故事｜第一集：百年使命",
      img: "https://p3.pstatp.com/large/pgc-image/SPjugNE3XdFQzz",
      te1: '<h2>非师范减什么肥</h2><p style="line-height: 1.67;margin:15rpx;">飞机搜房</p><p style="line-height: 1.67;padding: 15rpx 0;">飞机搜房就</p>',
    };
  },
  onLoad(option) {
    this.newId = JSON.parse(decodeURIComponent(option.id));
    console.log(this.newId);
  },
  onShow() {
    this.$MyRequest({
      url: "/prevention-knowledge-id",
      data: {
        id: this.newId,
      },
    }).then((res) => {
      console.log(res);
      this.newsData = res.data.data;
      for (let i in this.newsData) {
        this.newsData[i].img = this.newsData[i].img.split(",");
      }
      console.log(this.newsData);
    });
  },
  methods: {},
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.reader {
  width: 100%;
  .reader-container {
    padding: 0 35rpx;
    .reader-content {
      .reader-header {
        padding-top: 10rpx;
        padding-bottom: 30rpx;
        font-weight: 700;
        color: #222;
        font-size: 48rpx;
      }
      .reader-img {
        width: 100%;
        // height: 50vw;
        padding-bottom: 50rpx;
        image {
          width: 100%;
          // height: 100%;
        }
      }
      .reader-text {
        color: #222;
        font-size: 36rpx;
      }
      // rich-text {
      //   color: #222;
      //   font-size: 35rpx;
      //   .p_class {
      //     line-height: 1.67;
      //     padding: 15rpx 0;
      //   }
      // }
    }
  }
}
</style>
